<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>


<style>
    /* 通配符选择器，是选中页面所有元素的 */
    * {
        /* 消除浏览器的默认样式 */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container {
        width: 600px;
        margin: 20px auto;
    }
    h1 {
        /* 文字居中 */
        text-align: center;
    }
    p {
        text-align: center;
        color: #666;
        margin: 20px 0;
    }
    .row {
        /* 设置成弹性布局 */
        display: flex;
        height:40px;
        /* 水平方向居中 */
        justify-content: center;
        /* 垂直方向居中 , 同时高度不再有效，不在和父元素相同*/ 
        align-items: center;
        
    }
    .row span {
        width: 80px;
    }
    .row input {
        width: 200px;
        height: 28px;
    }
    .row button {
        width: 280px;
        height: 30px;
        color: white;
        background-color: orange;
        /* margin: 40px 0; */
        /* 去掉边框 */
        border: none;
        /* 去掉直角，变成圆角 (倒角) */
        border-radius: 6px;
    }

    /* 点击的时候有个反馈：也就是换个颜色 */
    .row button:active {
        background-color: #666;
    }
</style>

</head>
<body>
    <div class="container">

        <h1>表白墙</h1>
        <p>输入内容后点击提交，信息会显示到下方表格中</p>
        <div class="row">

            <span>谁:</span>
            <input type="text">
        </div>

        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div>
        
        <div class="row">
            <span>说:</span>
            <input type="text">
        </div>

        <div class="row">
            <button id="submit">提交</button>
        </div>

        <div class="row">
            <button id="revert">撤销</button>
        </div>

    </div>

    <!-- 使用ajax 需要引入jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script>
        // 实现提交操作，点击提交按钮，就能够把用户输入的内容提交到页面上进行显示
        // 点击的时候，获取到三个输入框中的文本内容
        // 创建一个新的 div.row 把内容构造到这个 div 中即可
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        // 选中button这个按钮
        let button = document.querySelector('#submit');
        button.onclick = function() {

            // 1.获取到三个输入框中的内容
            let from = inputs[0].value; 
            let to = inputs[1].value; 
            let msg = inputs[2].value; 

            // 如果用户没有填写(空字符串)，则直接返回, 不会显示  对  说：
            if(from == '' || to == '' || msg == '') {
                return;
            }

            // 2.构造新的div语句 
            let rowDiv = document.createElement('div');

            // 加上属性 (类名字)
            // 注意 多个类属性的时候, 不加逗号
            rowDiv.className = 'row  message';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说：' + msg; 

            // 把这个div语句 加入到container中去
            containerDiv.appendChild(rowDiv);

            // 3.点击提交后，清空之前的输入框内容
            for (let input of inputs) {
                input.value = '';
            }

            // 4.[新增] 给服务器发起 post 请求，把上述数据提交到服务器这边
            // 定义一个 js 对象
            // 类似于 json 的键值对,左边是key,右边是value 
            // key 是字符串，value则是js中的变量/常量
            // js中要求key必须是字符串，双引号可以省略

            // 注意当前的body 是个对象，不是字符串
            // 网络传输只能传字符串，不能传对象
            // 所以需要把 body对象转换成 json 格式的字符串
            let body = {
                "from": from,
                "to": to,
                "message": msg
            };
            // 把 body对象转换成 json 格式的字符串
            let strBody = JSON.stringify(body);
            // 加上日志，方便调试
            console.log("strBody: " + strBody);
            $.ajax({
                type: 'post',
                url: 'message',
                // 上述两行代码 方法和路径 都是约定好的
                // 把 body对象转换成 json 格式的字符串 
                // 此时把strBody 这个字符串，当作 body 传到data中去
                data:strBody,
                contentType: "application/json;charset=utf8",
                success: function(body) {
                    console.log("数据发布成功");
                }
            });
        }

        // 撤销操作
        let revert = document.querySelector('#revert');
        revert.onclick = function() {
            // 这个获取到的是一个 数组
            let rows = document.querySelectorAll('.message');
            //找到最后一条消息，进行删除即可
            // 选中所有的row，找到最后一个row
            if(rows == null || rows.length == 0) {
                return;
            }
            containerDiv.removeChild(rows[rows.length - 1]);
        }


         // [新增] 在页面加载的时候, 发送 GET 请求, 从服务器获取到数据并添加到页面中
         $.ajax({
            type: 'get',
            url: 'message',
            contentType: "application/json;charset=utf8",
            success: function(body) {
                // 此处拿到的 body 就是一个 js 的对象数组了. 
                // 本来服务器返回的是一个 json 格式的字符串, 但是 jquery 的 ajax 能够自动识别
                // 自动帮我们把 json 字符串转成 js 对象数组
                // 接下来遍历这个数组, 把元素取出来, 构造到页面中即可

                let containerDiv = document.querySelector('.container');
                for(let message of body) {
                    // 2.构造新的div语句 
                    let rowDiv = document.createElement('div');

                    // 加上属性 (类名字)
                    // 注意 多个类属性的时候, 不加逗号
                    rowDiv.className = 'row  message';
                    // 注意此处的 from to msg 的数据都是从 body 的对象数组中的 message对象取来的,注意 . 的是key
                    rowDiv.innerHTML = message.from + ' 对 ' + message.to + ' 说：' + message.message; 

                    // 把这个div语句 加入到container中去
                    containerDiv.appendChild(rowDiv);
                }

            }
         });
    </script>
</body>
</html>